.container {
  font-size: 16px;
  color: var(--text-color);
  animation-duration: 1.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

.upNext {
  composes: container;
  animation-name: up-next-bg-animation;
  filter: var(--up-next-filter);
}

@keyframes up-next-bg-animation {
  0% { background-color: var(--up-next-bg-color-to); }
  100% { background-color: var(--up-next-bg-color-from); }
}

.upNow {
  composes: container;
  animation-name: up-now-bg-animation;
  filter: var(--up-now-filter);
}

@keyframes up-now-bg-animation {
  0% { background-color: var(--up-now-bg-color-to); }
  100% { background-color: var(--up-now-bg-color-from); }
}

.inQueue {
  composes: container;
  background-color: var(--up-next-bg-color-from);
}

.msg {
  margin: 0;
  padding: 5px;
  text-align: center;
}
